<template>
   <div class="app-container">
       <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" :model="listQuery" ref="listQuery" class="demo-form-inline">
            <el-form-item label="">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="listQuery.start_date"
                    type="date"
                    placeholder="开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="listQuery.end_date"
                    type="date"
                    placeholder="结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-input type="text" v-model="listQuery.serial" placeholder="请输入期数"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item" v-loading="listLoading">
          <el-table ref="dataList" :data="menuList" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <!-- <el-table-column type="selection"></el-table-column> -->
              <el-table-column prop="id" label="期数"> </el-table-column>
              <el-table-column prop="start_time" label="开始时间" > </el-table-column>
              <el-table-column prop="end_time" label="结束时间" > </el-table-column>
              <el-table-column prop="rule_type" label="接龙规则" >
                  <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.rule_type === 1">最小接龙</el-tag>
                      <el-tag type="info" v-if="scope.row.rule_type === 2">最大接龙</el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="user_count_limit" label="人数" >
                  <template slot-scope="scope">
                    {{`${scope.row.join_user_count}/${scope.row.user_count_limit}`}}
                  </template>
              </el-table-column>
              <el-table-column prop="reward_count" label="糖果数" > </el-table-column>
              <el-table-column prop="base_money" label="保证金" > </el-table-column>
              <el-table-column prop="status" label="状态" >
                  <template slot-scope="scope">
                      <el-tag type="success" v-if="scope.row.status === 1">正常结束</el-tag>
                      <el-tag type="warning" v-if="scope.row.status === 2">未开始，被强制中断</el-tag>
                      <el-tag type="info" v-if="scope.row.status === 3">未开始，保存参与用户信息，下次重用</el-tag>
                      <el-tag type="primary" v-if="scope.row.status === 4">正在进行</el-tag>
                      <el-tag type="danger" v-if="scope.row.status === 5">异常中断</el-tag>
                  </template>
              </el-table-column>

              <el-table-column label="操作" width="120px">
                  <template slot-scope="scope">
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleDetail(scope.row)" plain>查看详情</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <!-- 分页 -->
          <cus-pagination
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.perPage"
              @pagination="getList"
          />
      </div>
  </el-card>
    <!-- 新增编辑弹框 -->
    <el-dialog  v-dialogDrag title="详情" :visible.sync="dialogDetailVisible">
        <el-table v-loading="listDialogLoading" ref="dialogTable" :data="dialogTableList" style="width:100%;" >
            <el-table-column prop="id" label="期数"> </el-table-column>
              <el-table-column prop="rule_type" label="接龙规则" >
                  <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.rule_type === 1">最小接龙</el-tag>
                      <el-tag type="info" v-if="scope.row.rule_type === 2">最大接龙</el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="user_count_limit" label="人数" >
                  <template slot-scope="scope">
                    {{`${scope.row.join_user_count}/${scope.row.user_count_limit}`}}
                  </template>
              </el-table-column>
              <el-table-column prop="reward_count" label="糖果数" > </el-table-column>
              <el-table-column prop="base_money" label="保证金" > </el-table-column>
              <el-table-column prop="status" label="状态" >
                  <template slot-scope="scope">
                      <el-tag type="success" v-if="scope.row.status === 1">正常结束</el-tag>
                      <el-tag type="warning" v-if="scope.row.status === 2">未开始，被强制中断</el-tag>
                      <el-tag type="info" v-if="scope.row.status === 3">未开始，保存参与用户信息，下次重用</el-tag>
                      <el-tag type="primary" v-if="scope.row.status === 4">正在进行</el-tag>
                      <el-tag type="danger" v-if="scope.row.status === 5">异常中断</el-tag>
                  </template>
              </el-table-column>
        </el-table>
        <el-table v-loading="listDialogLoading" ref="dialogTable2" :data="dialogTableUserList" style="width:100%;margin-bottom: 20px;" >
            <el-table-column prop="user_code" label="用户ID"> </el-table-column>
            <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
            <el-table-column prop="reward_count" label="获得糖果数" > </el-table-column>
        </el-table>
    </el-dialog>
   </div>
</template>

<script>

import {
    listData,
    listDetailData
} from '@/api/redEnvelope/gameRecord'
export default {
    data(){
        return {
            listDialogLoading:false,
            dialogTableUserList:[],
            dialogTableList:[],
            // 要修改的当前行的id
            row_id:0,
            // 黑名单类别
            blackList:[
                {value:1,label:'1'},
                {value:2,label:'4'},
                {value:3,label:'6'},
                {value:4,label:'3'},
                {value:5,label:'5'}
            ],
            // 选中的黑名单类别
            checkBlackList:[],
            provinceList:[],
            cityList:[],
            // 表单规则
            editRulesFormRules:{
                user_id:[{required: true, message: '请输入用户ID', trigger: 'blur' },{type:'number',message:'用户ID必须为大于0的数字',min:0}],
                cate_ids:[{ type: 'array', required: true, message: '请至少选择一个黑名单类别', trigger: 'change' }]
            },
            // 受限类型
            limit_typeList:[
                {value:1,label:'全部'},
                {value:2,label:'IP'},
                {value:3,label:'归属地'},
            ],
            editRulesForm:{
                user_id:undefined,
                cate_ids:[],
            },
            dialogStatus: '',
            // dialog的头部信息
            titleMap: {
                update: '编辑',
                create: '添加'
            },
            dialogDetailVisible:false,
            dialogFormVisible:false,
            deleteDialogVisible:false,
            listLoading:false,
            menuList:[],
            limitList:[],
            listQuery:{
                page:1,
                perPage:10,
                start_date:undefined,
                end_date:undefined,
                serial:undefined
            },
            total:0,
            // 勾选内容
            multipleSelection: [],
            // 要删除的内容的ids
            dataIds:'',
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            this.listLoading = true;
            let urlData = "?";
            if (this.listQuery.page) {
                urlData = urlData + `page=${this.listQuery.page}&`;
            }
            if (this.listQuery.perPage) {
                urlData = urlData + `perPage=${this.listQuery.perPage}`;
            }
            if (this.listQuery.start_date) {
                urlData = urlData + `&start_date=${this.listQuery.start_date}`;
            }
            if (this.listQuery.end_date) {
                urlData = urlData + `&end_date=${this.listQuery.end_date}`;
            }
            if (this.listQuery.serial) {
                urlData = urlData + `&serial=${this.listQuery.serial}`;
            }

            listData(urlData).then((response) => {

                this.menuList = response.data.list;
                this.total = response.data.meta.total;
                this.listLoading = false
            })
        },
        searchSubmit(){
            this.listQuery.page = 1

            this.getList();
        },
        resetSubmit(){
            this.listQuery.page = 1;
            this.listQuery.perPage = 10
            this.listQuery.start_date = undefined
            this.listQuery.end_date = undefined
            this.listQuery.serial = undefined
        },
        handleDetail(row){
            this.dialogDetailVisible = true;
            this.listDialogLoading = true

            this.dialogTableList[0] = row
            listDetailData(`?serial=${row.id}`).then(response => {

                this.dialogTableUserList = response.data
                this.listDialogLoading = false
            })
        },



        // 点击新增
        handleCreate(){
            this.resetForm('editRulesForm')
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
        },
        // 点击编辑
        handleUpdate(row){

            this.row_id = row.id
            this.editRulesForm.user_id = row.user_id;
            this.editRulesForm.cate_ids = row.cate_ids.split(',');

            this.dialogStatus = 'update'
            this.dialogFormVisible = true
        },
        // 重置表单内容
        resetForm(formName) {
            this.$nextTick(()=>{
                // this.$refs[formName].resetFields();
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
                this.editRulesForm = {
                    user_id:undefined,
                    cate_ids:[],
                }
            })

        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    if(this.dialogStatus === 'create'){
                        postAddData(this.editRulesForm).then(response => {
                            if (response.code === 200) {
                                this.getList()
                                this.dialogFormVisible = false;
                                this.$notify({
                                    type:'success',
                                    message: '操作成功',
                                    position: 'bottom-right',
                                    showClose: false,
                                    duration: 3000
                                });
                            } else {
                                this.$message({
                                    message: response.message,
                                    type: 'error'
                                });
                            }
                        })
                    }else {
                        putEditData(this.row_id,this.editRulesForm).then(response => {
                            if (response.code === 200) {
                                this.getList()
                                this.dialogFormVisible = false;
                                this.$notify({
                                    type:'success',
                                    message: '操作成功',
                                    position: 'bottom-right',
                                    showClose: false,
                                    duration: 3000
                                });
                            } else {
                                this.$message({
                                    message: response.message,
                                    type: 'error'
                                });
                            }
                        })
                    }
                } else {

                    return false;
                }
            });
        },
    }
}
</script>

<style scoped>
[v-cloak] {
        display: none;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .demo-form-inline {
        float: right;
    }

    /deep/ .el-card__header {
        padding-bottom: 0;
    }

    /deep/.el-dialog{
        position: relative;
        margin: 0 auto 50px;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 70% !important;
    }

    /deep/.el-dialog {
        max-width: 1000px;
    }
</style>
